<template>
  <view>
    <view>
      <view class="patient-infor" v-for="(item,index) in list" :key="index" :class="index===key?'a':''"
            @click="add(item,index)">
        <view class="patient-flex">
          <text class="patient-name">{{ item.name }}</text>
          <text class="patient-text">{{ item.relation }}</text>
        </view>
        <view class="patient-flex patient-sex">
          <text>{{ item.sex }}</text>
          <text>{{ item.age }}</text>
          <text>{{ item.phone }}</text>
        </view>
      </view>
      <!-- 提交 -->
      <view class="submit">
        <text>取消</text>
        <text @click="go">添加就诊人</text>
      </view>
    </view>

    <!-- 空组件 -->
    <view style="height:150px"></view>
  </view>
</template>

<script>

import {getpatient} from "../../utils/API/homeapi";

export default {
  data() {
    return {
      list: [],
      key: -1,
      obj: {}
    };
  },
  async onShow() {
    let {data} = await getpatient()
    this.list = data

  },
  methods: {
    go() {
      wx.navigateTo({
        url: "/pages/add_patient/add_patient"
      })
    },
    add(item, index) {
      this.key = index
      this.store.commit('add', item)
      setTimeout(() => {
        wx.navigateBack({
          delta: 1
        })
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
@import url('../../static/common-style/form.css');

.a {
  background-color: #e8f2fe !important;
}

page {
  background-color: #f6f6f6;
}

.patient-infor {
  background-color: #ffffff;
  margin: 10px;
  border-radius: 7.5px;
  font-size: 14px;
}

.patient-flex {
  display: flex;
  align-items: center;
  padding: 10px;
}

.patient-name {
  font-size: 17px;
  font-weight: bold;
}

.patient-flex text {
  margin-right: 7.5px;
}

.patient-text {
  background-color: #d6f3ff;
  color: #78beff;
  padding: 1px 7.5px;
}

.patient-sex {
  color: #7c96af;
}
</style>
